<template>
	<view class="home" >
		<up-toast ref="uToastRef"></up-toast>
		<uni-nav-bar  v-if="fasdwtype==true"   :fixed="true" :border="false" background-color="#F7F8FA" status-bar>
			<template v-slot:left>
				<view class="left-bar">
					<image class="image-icon" src="https://static-tool.77.top/static/77logo.png" mode=""></image>
					<image class="logo-text77" src="https://static-tool.77.top/static/77top.png" mode="aspectFit">
					</image>
					<image class="image-icon" src="https://static-tool.77.top/static/lushi-logo.png" mode=""></image>
					<image class="image-text" src="https://static-tool.77.top/static/HSkpzs.png" mode="heightFix">
					</image>
				</view>
			</template>
		</uni-nav-bar>
		<view  v-if="fasdwtype==false" style="position: fixed;top: 0;z-index: 99999;width: 100%;background:#F7F8FA ;height:45rpx;padding: 20rpx;line-height: 45px;display: flex;align-items: center;justify-content: space-between;">
			<view class="left-bar">
				<image class="image-icon" src="https://static-tool.77.top/static/77logo.png" mode=""></image>
				<image class="logo-text77" src="https://static-tool.77.top/static/77top.png" mode="aspectFit">
				</image>
				<image class="image-icon" src="https://static-tool.77.top/static/lushi-logo.png" mode=""></image>
				<image class="image-text" src="https://static-tool.77.top/static/HSkpzs.png" mode="heightFix">
				</image>
			</view>
			<view  style="width:174rpx;height: 64rpx;background: rgba(255,255,255,0.6);border-radius: 50rpx;border: 1rpx solid rgba(151,151,151,0.2);display: flex;align-items: center;justify-content: center;    margin-right: 24px;">
			  <image src="/static/share@2x.png" mode="" style="width: 42rpx;height: 42rpx;"></image>
			 <view style="width: 1rpx;height: 37rpx;background: rgba(0,0,0,0.2);margin:0 25rpx;"></view>
			  <image  src="/static/off@2x.png" alt=""  style="width: 42rpx;height: 42rpx;"  @click="goback()"   />
			 </view>
		</view>
		<view style="height:80rpx;width: 100%;" v-if="fasdwtype==false"></view>
		<view class="home-content">
			<image v-if="!model" @click="handleOpenDown" class="banner-image"
				src="https://static-tool.77.top/static/home-banner.png"></image>
			<view class="button-part">
				<image @click="handleOpenCardGroup" class="card-group-library"
					src="https://static-tool.77.top/static/home-cardGroup.png" mode="heightFix"></image>
				<view class="button-box right-box">
					<image @click="handleOpenCardGuid" class="card-guid"
						src="https://static-tool.77.top/static/home-card.png" mode="heightFix">
					</image>
					<image @click="handleOpenCardGroupimitate" class="card-group-imitate"
						src="https://static-tool.77.top/static/home-cardGroupm.png" mode="heightFix"></image>
				</view>
			</view>
			<view class="card-group-commit">
				<view class="commit-title">
					<img class="title-icon" src="https://static-tool.77.top/static/home-hot.png" alt="" />
					<!-- <text class="title-text">热门卡组讨论</text> -->
					<image class="text-icon" src="https://static-tool.77.top/static/rmkz.png" mode="heightFix"></image>
				</view>
				<!-- <scrollContainer :more="more" :commitList="commitList" @refresh="resetCommon" @initData="initData"></scrollContainer> -->
				<view class="container">
					<scroll-view ref="scrollView" class="scroll-view" :scroll-y="true" :scroll-top="scrollTop"
						@scrolltolower="handleScrollToLower" scroll-with-animation>
						<view class="comment-list">
							<view v-for="item in commitList" :key="item.id" class="commit-item">
								<view class="commit-item-top">
									<view class="item-top-left">
										<view class="user-info">
											<image :src="item.avatar" mode=""></image>
											<view class="user-name">
												<view class="name-text">
													{{item.userName}}
												</view>
											</view>
										</view>
										<view class="commit-content-text">
											{{item.content}}
										</view>
									</view>
									<image v-if="item.form == 'card'" @click="handleOpenCardSingle(item.objectId)"
										class="card-image" :src="item.cardImage" mode=""></image>
								</view>
								<view class="commit-origin" v-if="item.form == 'group'"
									@click="handleOpenGroupDetail(item.objectId, item.groupName)">
									<view class="origin-text">
										评论来自卡组
									</view>
									<image class="orgin-avatar" :src="item.groupImage" mode="aspectFill"></image>
									<view class="origin-title">
										{{item.groupName}}
									</view>
								</view>
								<view class="view-info">
									<view class="view-count">
										{{item.createtime}}
									</view>
									<view class="zan-count">
										<image @click="handleClickZan(item, false)" v-if="item.isZan" class="title-icon"
											src="https://static-tool.77.top/static/zan.png" alt="" />
										<image @click="handleClickZan(item, true)" v-else class="title-icon"
											src="https://static-tool.77.top/static/zan-not.png" alt="" />
										<text class="title-text">{{item.zan}}点赞</text>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="hot-cardGroup">
					<view class="cardGroup-title">
						<image class="card-pic" :src="hotCardGroup.image" mode="aspectFill"></image>
						<view class="cardGroup-title-text">
							{{hotCardGroup.name}}
						</view>
						<view class="hot-tag">
							热门卡组
						</view>
					</view>
					<view class="commit-box">
						<up-input id="myInput" v-if="inputShow" clearable @confirm="handleAddCommon"
							v-model:modelValue="commentInfo" shape="circle" :placeholder="hotCardGroup.commit"
							prefixIcon="search" placeholderStyle="font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #AEB0B3;">
							<template #prefix>
								<image style="transform: translateY(4rpx);" v-if="avatar" :src="avatar" mode=""></image>
								<image style="transform: translateY(4rpx);" v-else class="user"
									src="/static/image/default_avatar.png" mode=""></image>
							</template>
						</up-input>
						<!-- 				<image class="user" src="https://static-tool.77.top/static/lushi-logo.png" mode=""></image>
						<text>{{hotCardGroup.commit}}</text> -->
					</view>
				</view>
				<view class="view-more">
					<text @click="handleOpenMore">查看更多评论动态</text>
					<image @click="handleOpenMore" src="https://static-tool.77.top/static/next-arrow.png"
						mode="contain">
					</image>
				</view>
			</view>
		</view>

	</view>
	<up-modal class="edit-modal-info" title="卡组驳回" :closeOnClickOverlay="true" @close="showEdit = false"
		:show="showEdit" :showConfirmButton="false" :showCancelButton="false">
		<view class="edit-modal">
			<view class="reject-reson">
				驳回原因：{{curEditItem.remark}}
			</view>
			<view class="reject-info">
				<image class="card-image" :src="curEditItem.image" mode="aspectFit"></image>
				<view class="right-info-outer">
					<view class="card-right-info">
						<view class="card-info-name">
							{{curEditItem.name}}
						</view>
						<view class="count-list">
							<view class="count-item" v-for="cc in curEditItem.rarityArr">
								<image :src="cc.image" mode="aspectFit"></image>
								<text>{{cc.count}}</text>
							</view>
						</view>
						<view class="count-item" style="margin-top: 16rpx;">
							<image src="https://static-tool.77.top/static/cardGroup-bottle.png" mode=""></image>
							<text>{{curEditItem.liquid}}</text>
						</view>
					</view>
				</view>
				<view class="card-time">

				</view>
			</view>
			<view class="edit" @click="handleOpenEditCardGroup">
				我知道了
			</view>
		</view>
	</up-modal>
</template>

<script setup>
	import {
		nextTick,
		onBeforeUnmount,
		onMounted,
		reactive,
		ref
	} from 'vue'
	import request from "/http/index.js"
	import {
		onLoad,
		onReady,
		onShow
	} from "@dcloudio/uni-app"
	import CommentCarousel from './component/swipper-commit.vue'
	import scrollContainer from './component/scroll.vue'

	const handleOpenDown = () => {
		// window.location.href = 'https://m.77.top/?ct=download&ac=m'
		uni.navigateTo({
			url: '/homePackages/downLoad'
		})
	}
	const model = ref('')
	const scrollTop = ref(0);
	const loadingComment = ref(false)
	const showComment = ref(false)
	const uToastRef = ref(null);
	const commentInfo = ref('')
	const commitList = ref([])
	const more = ref(true)
	const hotCardGroup = ref({})
	const page = ref(1)
	const avatar = uni.getStorageSync("avatar")
	const isLogin = () => {
		console.log(111);
		// 判断是否登录
		if (!uni.getStorageSync("token")) { //跳转登录
			const systemInfo = uni.getSystemInfoSync();
			const platform = systemInfo.uniPlatform;
			if (platform === 'mp-weixin') {
				uni.navigateTo({
					url: '/pages/login/wxlogin'
				});
			} else if (platform === 'h5' || platform == 'web') {
				uni.navigateTo({
					url: '/pages/login/h5login'
				});
			}

		}

	}
	const initData = () => {
		return request({
			url: '/api/index',
			method: 'POST',
			data: {
				page: page.value
			}
		}).then(res => {
			showComment.value = true
			loadingComment.value = false
			if (res.data?.comments.length > 0) {
				page.value++
				// 评论列表
				commitList.value = [...commitList.value, ...(res.data?.comments || []).map(dd => {
					return {
						id: dd.id,
						userName: dd.user?.username || '',
						createtime: dd.createtime,
						avatar: dd.user?.avatar || '',
						content: dd?.content || '',
						form: dd.type === 0 ? 'group' : 'card',
						zan: dd.zan,
						isZan: false,
						groupImage: dd.object?.banner_image,
						groupName: dd.object?.name || '',
						cardImage: dd.object?.image || '',
						objectId: dd.object?.id || dd.object?.dbfId
					}
				})];
				more.value = true
			} else {
				more.value = false
			}
			//热门卡组
			let hot_temp = res.data?.hot_deck || {}
			hotCardGroup.value.id = hot_temp.id || ''
			hotCardGroup.value.image = hot_temp.banner_image || ''
			hotCardGroup.value.name = hot_temp.name || ''
			hotCardGroup.value.commit = res.data?.more_message || ''

		})
	}
	const handleOpenMore = () => {
		uni.navigateTo({
			url: '/homePackages/moreCommit'
		})
	}
	// 卡组库
	const handleOpenCardGroup = () => {
		uni.navigateTo({
			url: '/homePackages/cardGroup'
		})
	}
	// 卡牌图鉴
	const handleOpenCardGuid = () => {
		uni.navigateTo({
			url: '/homePackages/cardGuid'
		})
	}
	// 卡组模拟
	const handleOpenCardGroupimitate = () => {
		// uni.navigateTo({
		// 	url: '/pages/cardGroup/index'
		// })
		uni.reLaunch({
			url: '/pages/cardGroup/index'
		})
	}
	const resetCommon = () => {
		more.value = true
		loadingComment.value = true
		showComment.value = false
		commitList.value = []
		page.value = 1
		// 重置轮播图
		initData()
	}
	// 评论
	const handleAddCommon = () => {
		if (!commentInfo.value) {
			uni.showToast({
				title: '评论内容不能为空！',
				icon: 'none'
			})
			return;
		}
		request({
			url: '/api/deck/comment_add',
			method: 'POST',
			data: {
				primary_id: hotCardGroup.value.id,
				type: 0,
				content: commentInfo.value
			}
		}).then(res => {
			if (res.code === 1) {
				inputShow.value = false
				commentInfo.value = ''
				nextTick(() => {
					inputShow.value = true
				})
				uni.showToast({
					title: res.msg || '评论成功',
					icon: 'none'
				})
				resetCommon()

			} else {
				uni.showToast({
					title: res.msg || '评论失败',
					icon: 'none'
				})
			}
		})
	}
	const handleOpenEditCardGroup = () => {
		request({
			url: '/api/deck/trash',
			method: 'POST',
			data: {
				deck_id: curEditItem.value.id,
			}
		}).then(res => {
			if (res.code == 1) {
				showEdit.value = false
			} else {
				uni.showToast({
					title: res.msg || '操作失败',
					icon: 'none'
				})

			}
		})
		// uni.navigateTo({
		// 	url: `/homePackages/createCardGroup?id=${curEditItem.value.id}`
		// });
	}
	const curEditItem = ref('')
	const showEdit = ref(false)
	const rarityMap = {
		'基础': 'https://static-tool.77.top/static/cardGroup-green.png',
		'普通': 'https://static-tool.77.top/static/cardGroup-white.png',
		'稀有': 'https://static-tool.77.top/static/cardGroup-blue.png',
		'史诗': 'https://static-tool.77.top/static/cardGroup-purple.png',
		'传说': 'https://static-tool.77.top/static/cardGroup-orange.png',
			'免费': 'https://static-tool.77.top/static/icon_rare@3x.png',
	}
	const raritySortMap = {
			'免费': '6',
		'基础': '5',
		'普通': '4',
		'稀有': '3',
		'史诗': '2',
		'传说': '1'
	}
	const fasdwtype = ref('')
	const initGroupReject = () => {
		if (uni.getStorageSync("token")) {
			request({
				url: 'api/user/decks',
				method: 'POST',
				data: {
					check_status: -1,
					page: 1,
					pagesize: 1
				}
			}).then(res => {
				if (res.data?.data.length > 0) {
					let tempArr = (res.data?.data || []).map(dd => {
						let rarityArr = (dd?.statis?.rarity || []).map(ee => {
							return {
								count: ee.count,
								image: rarityMap[ee.name],
								sort: raritySortMap[ee.name]
							}
						}).sort((a, b) => a.sort - b.sort)
						return {
							...dd,
							id: dd.id,
							image: dd.image,
							name: dd.name,
							rarityArr,
							liquid: dd.amount,
							time: dd.createtime,
							zan: dd.zan,
							author: dd?.user?.username,
							avatar: dd.user?.avatar
						}
					})
					// 存在驳回卡组
					curEditItem.value = tempArr[0]
					showEdit.value = true


				}

			})
		}
	}
	// 滚动组件相关
	const interval = 6000; // 自动切换间隔时间


	// Simulate loading more data
	const loadMoreData = async () => {
		// if (!more.value) {
		// 	// No more data, scroll to the top
		// 	scrollTop.value = 0;
		// 	// Optionally trigger a refresh or any other action here
		// 	more.value = true
		// } else {
		await initData()
		// scrollTop.value += 200;
		// }
	};
	const inputShow = ref(true)
	const handleScrollToLower = () => {
		loadMoreData();
	};
	let timer = null
	// Auto scroll function
	const autoScroll = () => {
		timer = setTimeout(async () => {
			// if (scrollTop.value < 400) {
			if (!more.value) {
				scrollTop.value = 0;
				more.value = true
			} else {
				scrollTop.value += 200;
			}
			// } else {
			// 	await loadMoreData();
			// }
			autoScroll()
		}, interval);
	};

	const handleClickZan = (item, flag) => {
		// item.isZan = flag
		// request({
		// 	url: 'api/deck/comment_zan',
		// 	method: 'POST',
		// 	data: {
		// 		comment_id: item.id
		// 	}
		// }).then((res) => {
		// 	 if(res.code == 1){
		// 		 item.zan++
		// 	 }else{
		// 	     uni.showToast({
		// 	     	title:res.msg || '操作失败！',
		// 			icon:'none'
		// 	     })
		// 	 }
		// })
	}
	// 跳转到卡牌详情
	const handleOpenCardSingle = (id) => {
		uni.navigateTo({
			url: `/homePackages/cardDetail?id=${id}&model=${model.value}`
		})
	}
	// 跳转到卡组
	const handleOpenGroupDetail = (id, groupName) => {
		uni.navigateTo({
			url: `/homePackages/cardGroupDetail?id=${id}&name=${groupName}&model=${model.value}`
		})
	}
	
	const  goback = () => {
  window.location.href = 'https://m.77.top/';
	}
	// const checkHeight = () => {
	//   const query = uni.createSelectorQuery();
	//   query.select('.comment-list').boundingClientRect((rect) => {
	// 	  console.log(rect);
	//     const height = rect.height;
	//     if (height === 400) {
	//       console.log('元素高度为400');
	//     } else {
	//       console.log('元素高度不为400，当前高度为', height);
	//     }
	//   }).exec();
	// };

	onLoad((e) => {
		if (e.model) {
			model.value = e.model
			uni.setStorageSync("model", e.model)
			if (model.value == 'ios') {
				window.webkit.messageHandlers.WebTitle.postMessage(
					'炉石工具',
				);
			} else {
				window.WebViewJavascriptBridge.callHandler(
					'WebTitle', '炉石工具',
					// 'WebShare','http://beta.h5-tool.77.top/#/homePackages/cardGroupDetail?id=' + id.value + '&name=' + name.value,
					function(responseData) {
						console.log('native return->' + responseData);
					}
				);
			}
		}
		initData()
		initGroupReject()
		autoScroll()
		// let u = navigator.userAgent;
		//     if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //判断安卓手机
		//         //  拿到获取焦点的input
		//         let input = document.getElementById('myInput')
		//         input.addEventListener('focus', function () {
		//             setInterval(function () {
		//                 input.scrollIntoView(true);
		//             }, 100)
		//         })
		//     }
		uni.getSystemInfo({
		  success: (systemInfo) => {
		    if (systemInfo.uniPlatform === 'devtools') {
	              fasdwtype.value = true
		    }else if(systemInfo.uniPlatform === 'mp-weixin'){
						    fasdwtype.value = true
					  } else {
		      fasdwtype.value = false
		    }
		  },
		});
	})
	onShow(() => {
		uni.showTabBar()
	})
	onBeforeUnmount(() => {
		clearTimeout(timer)
	})
</script>

<style lang="scss" scoped>
	.edit-modal-info {
		:deep(.u-modal__title) {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			padding-top: 48rpx;
		}

		:deep(.u-modal__content) {
			padding: 32rpx;
			justify-content: flex-start;
		}
	}

	.edit-modal {
		width: 100%;

		.edit {
			width: 304rpx;
			height: 60rpx;
			background: #FD8B00;
			border-radius: 84rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			text-align: center;
			margin-top: 16rpx;
			box-sizing: border-box;
			color: #fff;
			line-height: 60rpx;
			margin: 48rpx auto 12rpx auto;

		}

		.reject-reson {
			width: 100%;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #E83847;
			text-align: center;
		}

		.reject-info {
			// width: 100%;
			height: 168rpx;
			background: #F2F3F5;
			border-radius: 24rpx;
			margin-top: 48rpx;
			display: flex;
			padding: 24rpx;
			box-sizing: border-box;

			.u-modal__content {
				padding: 24rpx;
			}

			.card-image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 16rpx;
			}

			.right-info-outer {
				flex: 1;
				margin-left: 16rpx;
				display: flex;
				justify-content: space-between;

				.card-right-info {
					.card-info-name {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 26rpx;
						color: #17181A;
						line-height: 26rpx;
					}

					.count-list {
						margin-top: 16rpx;
						display: flex;
						align-items: center;
					}

					.count-item {
						margin-right: 16rpx;
						display: flex;
						align-items: center;
						line-height: 24rpx;

						image {
							width: 24rpx;
							height: 24rpx;
						}

						text {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #2E3033;
						}

					}
				}

			}



		}
	}

	:deep(uni-page-wrapper) {
		background: #F7F8FA;
	}

	.home {

		.left-bar {

			display: flex;
			align-items: center;


			.image-icon {
				width: 40rpx;
				height: 40rpx;
			}

			.image-text {
				width: auto;
				height: 28rpx;
				margin-left: 8rpx;
				display: flex;
				align-items: center;
			}

			text {
				margin-left: 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #2E3033;
			}

			.logo-text77 {
				margin-left: 8rpx;
				width: 116rpx;
				height: 28rpx;
				display: flex;
				align-items: center;

				&::after {
					content: '';
					display: inline-block;
					width: 1rpx;
					height: 16rpx;
					border-left: 1px solid #E4E5E6;
					margin: 0 8rpx;
				}
			}
		}

		.home-content {
			background: #F7F8FA;
			padding: 16rpx 24rpx;

			.banner-image {
				width: 100%;
				height: 300rpx;
				border-radius: 24rpx
			}

			.button-part {
				width: 100%;
				height: 342rpx;
				display: flex;
				margin-top: 22rpx;
				position: relative;

				.card-group-library {
					flex-shrink: 0;
					width: 362rpx;
					height: 342rpx;
					height: auto;
					box-sizing: border-box;

					.card-group-title {
						font-family: HelloFont WenYiHei, HelloFont WenYiHei;
						font-weight: 400;
						font-size: 44rpx;
						color: #FFFFFF;
					}

					.card-group-subtitle {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #F7F8FA;
					}

					.card-group-button-text {
						width: 132rpx;
						height: 52rpx;
						border-radius: 92rpx 92rpx 92rpx 92rpx;
						border: 2rpx solid rgba(255, 255, 255, 0.8);
						margin-top: 100rpx;
					}
				}

				.button-box {
					width: 50%;
					height: 100%;
				}

				.right-box {
					// padding-top: 18rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					position: absolute;
					right: 0;
					top: 0;
					// transform: translateX(-10rpx);

					.card-guid {
						width: 336rpx;
						height: 184rpx;
						// transform: translateX(-10rpx);
						// background-image: url(https://static-tool.77.top/static/home-card.png);
						// background-repeat: no-repeat;
						// background-size: contain;
						// padding: 50rpx 0 0 34rpx;
						// box-sizing: border-box;

					}

					.card-group-imitate {
						margin-top: 22rpx;
						width: 352rpx !important;
						height: 136rpx;
						// background-image: url(https://static-tool.77.top/static/home-cardGroupm.png);
						// background-repeat: no-repeat;
						// background-size: contain;
						// padding: 32rpx 0 0 28rpx;
					}

					.card-group-title {
						font-family: HelloFont WenYiHei, HelloFont WenYiHei;
						font-weight: 400;
						font-size: 32rpx;
						color: #FFFFFF;
					}

					.card-group-subtitle {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #F7F8FA;
					}
				}
			}

			.card-group-commit {
				padding: 32rpx 24rpx;
				box-sizing: border-box;
				margin-top: 32rpx;
				width: 100%;
				background: #FFFFFF;
				border-radius: 24rpx;

				.commit-title {
					display: flex;
					align-items: center;

					.title-icon {
						width: 28rpx;
						height: 28rpx;
					}

					.text-icon {
						height: 28rpx;
						margin-left: 4px;
					}

					.title-text {
						font-family: HelloFont WenYiHei, HelloFont WenYiHei;
						font-weight: bold;
						font-size: 28rpx;
						color: #000000;
					}
				}

			}

			.hot-cardGroup {
				width: 100%;
				height: 200rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				border: 2rpx solid #F2F3F5;
				margin-top: 32rpx;
				padding: 24rpx;
				box-sizing: border-box;

				.cardGroup-title {
					display: flex;
					align-items: center;

					.card-pic {
						width: 64rpx;
						height: 64rpx;
						// background: rgba(0, 0, 0, 0.1);
						border-radius: 8rpx 8rpx 8rpx 8rpx;
					}

					.cardGroup-title-text {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #2E3033;
						line-height: 28rpx;
						margin-left: 16rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.hot-tag {
						margin-left: 8rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #E55C67;
						line-height: 20rpx;
						padding: 6rpx;
						background: rgba(229, 92, 103, 0.1);
						border-radius: 8rpx;
						white-space: nowrap;
					}
				}

				.commit-box {
					margin-top: 24rpx;
					display: flex;
					align-items: center;
					width: 100%;
					height: 64rpx;
					// background: #F7F8FA;
					border-radius: 48rpx;
					padding: 8rpx;
					box-sizing: border-box;

					image {
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
					}

					.u-input {
						height: 64rpx;
						box-sizing: border-box;
						background: #F7F8FA;
						border-radius: 48rpx;
						border: 0;
					}

					:deep(.u-input) {
						height: 64rpx;
						box-sizing: border-box;
						background: #F7F8FA;
						border-radius: 48rpx;
						border: 0;
					}

					text {
						margin-left: 12rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 22rpx;
						color: #7B7D80;
					}
				}
			}

			.view-more {
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #AEB0B3;
				margin-top: 32rpx;

				image {
					width: 24rpx;
					height: 24rpx;
					margin-left: 8rpx;
				}
			}
		}
	}

	.container {
		height: 400px;
		overflow: hidden;
	}

	.scroll-view {
		height: 100%;
		padding: 24rpx;
		box-sizing: border-box;

		.comment-list {
			.commit-item {
				margin-top: 32rpx;

				.card-image {
					width: 85rpx;
					height: 120rpx;
					margin-left: 22rpx;
					border-radius: 8rpx;
				}

				.commit-item-top {
					display: flex;
					align-items: flex-end;

					.item-top-left {
						flex: 1;
					}
				}

				.user-info {
					display: flex;
					align-items: center;

					image {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
					}

					.user-name {
						margin-left: 8rpx;

						.name-text {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #2E3033;
						}

						.create-time {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 22rpx;
							color: #7B7D80;
							margin-top: 12rpx;
						}
					}
				}

				.commit-content-text {
					margin-top: 14rpx;
					font-family: PingFang SC, PingFang SC;
					// font-weight: 500;
					font-size: 30rpx;
					color: #47494D;
					line-height: 40rpx;
					text-align: left;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
				}

				.commit-origin {
					display: flex;
					align-items: center;
					height: 56rpx;
					background: #F7F8FA;
					border-radius: 16rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #2E3033;
					text-align: left;
					padding: 16rpx;
					box-sizing: border-box;
					margin-top: 14px;

					.orgin-avatar {
						width: 32rpx;
						height: 32rpx;
						border-radius: 8rpx;
						margin-right: 8rpx;
					}

					.origin-text {
						&::after {
							display: inline-block;
							content: '';
							width: 1rpx;
							height: 16rpx;
							background-color: #AEB0B3;
							margin: 0 8rpx;
						}

					}

					.origin-title {
						flex: 1;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}

				.view-info {
					margin-top: 8rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					image {
						width: 48rpx;
						height: 48rpx;
					}

					.view-count {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #7B7D80;

					}

					.zan-count {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #47494D;
						line-height: 23rpx;
						display: flex;
						align-items: center;
					}
				}
			}


		}
	}
</style>